<template>
  <div class="login">
    <transition name="form-fade" mode="in-out">
      <div class="login-form" v-show="showLogin">
        <h1>搜钱包后台管理系统</h1>
        <div class="login-item">
          <Input placeholder="用户名" style="width: 100%" clearable v-model.trim="name" @keyup.enter.native="login">
            <Icon type="md-person" slot="prefix" color="#2d8cf0" />
          </Input>
        </div>
        <div class="login-item">
          <Input placeholder="密码" style="width: 100%" type="password" clearable v-model.trim="password" @keyup.enter.native="login">
            <Icon type="md-lock" slot="prefix" color="#2d8cf0" />
          </Input>
        </div>
        <Button type="primary" class="login-btn" :loading="loading" @click="login">
          <span v-if="!loading">登录</span>
          <span v-else>Loading...</span>
        </Button>
        <p class="login-tip">输入用户名和密码</p>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        showLogin: false,
        name: '',
        password: '',
        loading: false
      }
    },
    mounted () {
      console.log(this.$http.defaults.fileURL)
      this.showLogin = true;
    },
    methods: {
      getLeftMenuList() {
        //左侧导航栏
        // var newPage = window.open('','_self')
        this.$post('/sys/user/menu')
          .then((res) => {
            if(res.code === 0){
              console.log(res)
              this.loading = false;
              sessionStorage.setItem('mu',res.data.menus);
              sessionStorage.setItem('load',1);
              sessionStorage.setItem('tag',JSON.stringify([
                {'title': '工作台', 'path': '/work', 'isCurrent': true,'name':"1"}
              ]))
              this.$router.push({path: '/work'});

            }
          })
      },
      login () {
        if(!this.name) {
          this.$Message.warning('请输入用户名');
        } else if(!this.password) {
          this.$Message.warning('请输入密码');
        } else {
          this.loading = true;
          this.$post('/sys/user/login',{
          // this.$post('/user/login',{
            account:this.name,
            // passWord:this.password
            passWord:this.$md5(this.password)
          })
          .then((res) => {
            // console.log(res,'rr');
            let code = res.code;
            if(code === 0){
              this.getLeftMenuList();
              let token = res.token;
              window.sessionStorage.setItem('token',token);

            } else {
              let msg = res.msg;
              this.loading = false;
              this.$Message.error(msg);
            }
          })
          .catch((err) => {
            this.loading = false;
            console.log(err);
          })

          // this.$http.post(this.$http.defaults.baseURL+'/sys/login',{
          //   userName: this.name,
          //   password: this.password
          // })
          //   .then((res) => {
          //     this.loading = false;
          //     let code = res.data.code;
          //     if(code === 200){
          //       let token = res.data.data.token;
          //       window.localStorage.setItem('token',token);
          //       this.$router.push({path: '/work'})
          //     } else {
          //       let msg = res.data.msg;
          //       this.$Message.error(msg);
          //     }
          //   })
          //   .catch((err) => {
          //     this.loading = false;
          //     console.log(err);
          //   });
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login{
    background-image: url(../assets/login_bg.jpg);
    background-position: 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .login-form{
    width: 300px;
    height: 280px;
    background:#fff;
    border-radius: 4px;
    padding: 30px 20px 0;
    border: 1px solid #5e70ab;
    box-shadow: 1px 1px 5px rgba(5, 28, 2, 0.9);
    position: absolute;
    right: 160px;
    top: 50%;
    margin-top: -140px;
    z-index: 20;
  }
  .login-form h1{
    color: #808080;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 20px;
  }
  .login-item{
    margin-bottom: 20px;
  }
  .login-btn{
    width: 100%;
    height: 32px;
    background: #2d8cf0;
    border: none;
  }
  .form-fade-enter-active, .form-fade-leave-active {
    transition: all 1s;
  }
  .form-fade-enter, .form-fade-leave-active {
    transform: translate3d(0, -50px, 0);
    opacity: 0;
  }
  .login-tip{
    color: #c3c3c3;
    font-size: 10px;
    text-align: center;
    margin-top: 30px;
  }
</style>
